details widget name

Themes

Chapter details

Themes in Atlas contain mainly CSS style files and images used by the renderers. Nevertheless, they may contain different entities like templates and color scheme definitions. Themes contain undetermined number of files that are stored as one archive zip file. One may put all kind of files he/she wants in the theme and then reference them whenever needed.

Theme beans are separated from the site ones and can be reused among websites. When there is no theme associated with a certain website, the default theme is used. The default theme is located in the com.tetracom.atlas.theme.web.resource package. There one can see the full structure of a theme. If a requested resource is not found in a certain theme, its analogue from the default theme is returned (if existing).

Theme plugins are located in the com.tetracom.atlas.theme package and its subpackages. The main theme bean interface is the com.tetracom.atlas.theme.api.bean.ITheme implemented by the com.tetracom.atlas.theme.impl.Theme.

The IColorScheme (respectively the ColorScheme bean) are used only for the selectors in i-Publisher's simple mode.

The IPreviewImageLinkProvider is adaptable interface for providing links to preview images, i.e. images from the theme.

The ColorSchemePropertiesProvider is a parser for the color schemes properties files.

The main services are the IThemeService and the IThemeDefaultService. The first one manages the ordinary themes and the second – the default one. With the services one can request specific theme components like the background styles, templates, color schemes, preview images, ets. A specific theme resource is requested via servlets:

  • ThemeServlet – with this setvlet one may request all kinds of theme resources. The requests to this servlet should have the following structure:

      /domain_id/css/theme_id.css/resource_path?scheme

    where:

    • domain_id is the id of the current domain (used by the DomainFilter). domain_id/css is the unique servlet mapping;

    • theme_id is the id of the requested theme or “default” for the default theme and;

    • resource_path is the path of the resource in the zip file or the relative path from the com.tetracom.atlas.theme.web.resource folder in the default theme;

    • scheme is the selected color scheme.

  • ThemeImageServlet – this the analogue of the com.tetracom.atlas.file.web.ImageServlet for the theme images. The requests to this servlet should have the following structure:

      /domain_id/t_img/widthXheight/theme_id?file_name&scheme

    where:

    • domain_id is the id of the current domain (used by the DomainFilter). domain_id/ t_img is the unique servlet mapping;

    • width is the width the requested image should be scaled to;

    • height is the height the requested image should be scaled to;

    • theme_id is the id of the requested theme or “default” for the default theme and;

    • file_name is the path of the resource in the zip file or the relative path from the com.tetracom.atlas.theme.web.resource folder in the default theme;

    • scheme is the selected color scheme.

Generally, one can create any files he/she likes in the theme. Nevertheless, there are some reserved files and folders. The most important of them are:

  • theme.mf – this is the manifest file of the theme. All used style files should be listed here. In all rendered pages' head tags there is a link tag with the following structure:

      <link href="/domain_id/css/theme_id.css?scheme" rel="stylesheet" type="text/css">

    This is a request to the ThemeServlet servlet. The lack of the resource path means that the content of the manifest file is requested. The response contains one line with the following format

      @import url("HTTP://i-publisher.atlasproject.eu:80/domain_id/css/theme_id.css/manifest_file?scheme");

    for each style file (manifest_file) listed in the manifest. Thus, the selected style sheets are imported and applied to the pages. This is again a request to the ThemeServlet servlet but this time the content of the manifest_file is returned.

  • backgrounds.css – the background classes for the regions are listed in this style file. They are used in the GUI and thus separated in a different file.

  • colorSchemes – the theme color schemes properties are placed in this folder. Each color scheme in Atlas is a set of “parameter-value” pairs. The style files may be parametrized with these parameters. Thus, all parameters should have values in all color schemes. When a the content of a parametrized style file is requested, the necessary replacements are made according to the selected color scheme.

    • colorSchemes/color_scheme_manifest.mf – all parametrized style files should be listed here in order for the parameters to be replaced with their correspondin values;

    • .properties files – the “parameter-value” pairs for each color scheme are listed in separate .properties files. For instance, if there is a color scheme by the name “c1” then there would be a colorSchemes/c1.properties file describing the color scheme parameters. A color scheme properties file has the following content:

      c1.properties:

      cs.name = cs1
      cs.pretty_name = My color scheme
      c1 = red
      bg_dots = colorSchemes/cs1/blue_dots.png

      There are two system parameters – the cs.name is the system name of the scheme and the cs.pretty_name is the pretty name used in the GUI. In this case there are two other parameters – one color(c1) and one image(bg_dots). The convention is that the color schemes dependent images be kept in the colorSchemes/cs.name (colorSchemes/cs1 in our case) folder. However, one can place them wherever he/she wants in the theme.

      In the style files parameters are referenced by name preceded by the “$” sign. Here is an example entry in the backgrounds.css file:

      .blue_dots{
      background-image:url($bg_dots);
      border-top:1px solid $c1;
      }

      When the backgrounds.css is imported with @import url("HTTP://i-publisher.atlasproject.eu:80/domain_id/css/theme_id.css/backgrounds.css?scheme=cs1") then some replacements will be made according to the c1.properties file and the result would be:

      .blue_dots{
      background-image:url(colorSchemes/cs1/blue_dots.png);
      border-top:1px solid red;
      }
  • preview_images – this folder contains the preview images used by the preview services;

  • templates – this folder contains the theme templates. These are template pages placed directly into the theme. They are described in the templates.xml file and can be used in the advanced mode only.

  • lng – the language flags used by language switcher are placed here.

All the other files are either style files or images referenced by the renderers.

There are two cache providers for caching the themes:

  • com.tetracom.atlas.theme.cache.provider.eh.api.IThemeCacheProvider – this services manages the theme beans;

  • com.tetracom.atlas.theme.cache.provider.eh.api.IThemeResourceCacheProvider – manages the theme resources. Here the key is formed by the id of the theme, the name of the resource file and the color scheme. When a non-cached file is requested, the zipped content of the theme is unzipped and cached at once. Thus, the whole theme content is unzipped only once when the first non-cached resource is requested.